<template>
	<view class="page-box">
		<view class="page-header">
			<view class="left-icon">
				<u-icon name="list" color="#000" size="26" @click="openLeft"></u-icon>
			</view>
			<view class="tabList">
				<view :class="index === checkIndex ? 'tabItem active' : 'tabItem'" v-for="(item, index) in tabList"
					:key="item.name" @click="changeTabs(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="page-content">
			<view class="overview-box">
				<view class="title-box">
					<view class="title">概况</view>
					<view class="date" @click="showDate = true">
						{{$u.timeFormat(pickDate, 'yyyy年mm月')}}
						<u-icon color="#666" size="26" name="calendar"></u-icon>
					</view>
				</view>
				<view class="number-box">
					<view class="number-item" v-for="item in numberList" :key="item.name">
						<view class="label">{{item.name}}</view>
						<view class="value">
							<u--text mode="price" :text="item.value" size="16" color="#999"></u--text>
						</view>
					</view>
				</view>
			</view>
			<view  v-if="opts.subtitle.name" class="charts-box" :style="platForm === 'ios' ? 'height: 540rpx' : 'height: 600rpx'">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" background="none" />
			</view>
			<view v-if="income_opts.subtitle.name" class="charts-box" :style="platForm === 'ios' ? 'height: 520rpx' : 'height: 580rpx'">
				<qiun-data-charts type="ring" :opts="income_opts" :chartData="incomeData" background="none" />
			</view>
		</view>
		
	<left-box v-if="showLeft" @closeLeft="closeLeft"/>
	<u-datetime-picker
	    ref="datetimePicker"
		:show="showDate"
		v-model="pickDate"
		:minDate="minDate"
		:maxDate="maxDate"
		:confirmColor="'#4e54c8'"
		:closeOnClickOverlay="true"
		mode="year-month"
		:formatter="formatter"
		@cancel="closeDate"
		@confirm="confirmDate"
	></u-datetime-picker>
	</view>
</template>

<script>
	import { getAnalyze } from '@/api/bill.js'
	import { mapGetters } from 'vuex'
	import LeftBox from '../components/left-box.vue'
	export default {
		components: { LeftBox },
		data() {
			return {
				bgColor: '#fff',
				tabList: [{
						name: '流水'
					},
					{
						name: '统计'
					},
				],
				platForm: '',
				checkIndex: 1,
				showLeft: false,
				pickDate: Number(new Date()),
				showDate: false,
				minDate: +new Date() - 5 * 30 * 24 * 3600 * 1000,
				maxDate: +new Date(),
				numberList: [
					{ name: '支出', value: 0 },
					{ name: '收入', value: 0 },
					{ name: '平衡', value: 0 },
				],
				opts: {
					title: {
						name: "本月支出(元)",
					},
					subtitle: {
						name: "0",
					},
				},
				income_opts: {
					title: {
						name: "本月收入(元)",
					},
					subtitle: {
						name: "0",
					},
				},
				chartData: {
					categories: [],
					series: [{
						"data": []
					}]
				},
				incomeData: {
					categories: [],
					series: [{
						"data": []
					}]
				},
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.platForm = uni.getSystemInfoSync().platform
			this.fetchData()
		},
		onLoad() {
			
		},
		methods: {
			async fetchData() {
				const params = {
					billDate: uni.$u.timeFormat(this.pickDate, 'yyyy-mm')
				}
				const rsp = await getAnalyze(params) 
				if(rsp.code === 0) {
					this.numberList[0].value = rsp.data.totalExpense
					this.numberList[1].value = rsp.data.totalIncome
					this.numberList[2].value = (rsp.data.totalIncome - rsp.data.totalExpense)
				    this.opts.subtitle.name = rsp.data.totalExpense
				    this.income_opts.subtitle.name = rsp.data.totalIncome
					this.chartData.series[0].data = rsp.data.payList
					this.incomeData.series[0].data = rsp.data.incomeList
				}
			},
			changeTabs(index) {
				if (index === 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
			},
			openLeft() {
				this.showLeft = true
			},
			closeLeft() {
				this.showLeft = false
			},
			 formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			closeDate() {
				this.showDate = false
			},
			confirmDate(val) {
				this.pickDate = val.value
				this.showDate = false
				this.fetchData()
			}
		}
	}
</script>
<style lang="scss">
	.charts-box {
		width: 100%;
		border: 1px solid #cfcfcf;
		padding: 15rpx 0; 
		margin-bottom: 20rpx;
	}
	
</style>
<style lang="scss" scoped>
	.page-box {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		.u-popup {
			flex: 0;
		}
		.page-header {
			width: 100%;
			height: 200rpx;
			position: relative;
			.left-icon {
				padding: 110rpx 0 0 50rpx;
			}
			.tabList {
				position: absolute;
				top: 90rpx;
				left: 50%;
				transform: translate(-50%, 0);
				display: flex;
				align-items: center;
				justify-content: center;
				.tabItem {
					color: #999;
					font-size: 32rpx;
					padding: 0 60rpx;
				}
				.active {
					margin-top: 15rpx;
					color: #000;
					font-weight: 500;	
					&::after {
						content: '';
						display: block;
						margin-top: 15rpx;
						background: #76C6FA;
						width: 100%;
						height: 3px;
						border-radius: 2px;
					}
				}
			}
		}    
	   .page-content {
		   flex: 1;
		   overflow: auto;
		   padding: 0 20rpx;
		   .overview-box {
			  .title-box {
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  padding: 0 20rpx;
				  color: #666;
				  .title {
					  font-weight: 500;
					  font-size: 18px;
				  }
				  .date {
					display: flex;
					align-items: center;  
				  }
			  } 
			  .number-box {
				  display: flex;
				  align-items: center;
				  padding: 25rpx;
				  border: 1px solid #cfcfcf;
				  margin: 25rpx 0;
				  .number-item {
					  flex: 1;
					  display: flex;
					  flex-direction: column;
					  align-items: center;
					  justify-content: center;
					  .label {
						  color: #666;
					  }
					  .value {
						  color: #999;
					  }
				  }
			  }
		   }
	   }
	}
</style>
